<template>
  <div class="address-edit">
    <van-nav-bar title="新增收货地址" left-text="" right-text="" left-arrow @click-left="onClickLeft"
      style="background-color: #F5F5F5;">
      <template #left>
        <van-icon name="arrow-left" size="19" color="#000" />
      </template>
      <!-- <template #right>
        <van-icon name="ellipsis" size="22" color="#000" />
      </template> -->
    </van-nav-bar>

    <van-address-edit class="address" :address-info="addressInfo" :area-list="areaList" show-set-default
      show-search-result :area-columns-placeholder="['请选择', '请选择', '请选择']" @save="onSave" @delete="onDelete" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import NavBar from '@/components/NavBar'

import areaList from '@/utils/area.js'
import { addAddress, deleteAddress, updateAddress } from '@/api/user.js'

export default {
  name: 'AddressEdit',
  components: {
    NavBar
  },
  data() {
    return {
      areaList,
      addressInfo: {
        name: "",
        tel: "",
        province: "",
        city: "",
        country: "",
        addressDetail: "",
        isDefault: false,
        areaCode: ""
      }
    }
  },
  computed: {
    ...mapGetters(['addressList'])
  },
  mounted() {
    const { val } = this.$route.query
    if (val) {
      this.addressInfo.name = val.name
      this.addressInfo.tel = val.mobile
      this.addressInfo.province = val.province
      this.addressInfo.city = val.city
      this.addressInfo.country = val.country
      this.addressInfo.addressDetail = val.detail

      this.addressInfo.isDefault = val.is_default == "1" ? true : false

      let proviceCode = (this.getKeyByValue(areaList.province_list, val.province)) + ""

      let cityCode = (this.getKeyByValue(areaList.city_list, val.city)) + ""
      let countyCode = (this.getKeyByValue(areaList.county_list, val.country)) + ""
      this.addressInfo.areaCode = proviceCode.substring(0, 2) + "" + cityCode.substring(2, 4) + "" + countyCode.substring(4, 6)
    }

    // this.addressInfo = this.addressList[Number(index)]
  },
  methods: {


    getKeyByValue(obj, value) {
      return Object.keys(obj).find(key => obj[key] === value);
    },
    onClickLeft() {
      this.$router.back()
    },
    onSave(value) {
      const { val } = this.$route.query
      let obj = {
        name: value.name,
        citys: value.province + "-" + value.city + "-" + value.county,
        mobile: value.tel,
        detail: value.addressDetail,
        is_default: value.isDefault ? 1 : 0
      }

      if (val) {
        obj.ids = val.id
        updateAddress(obj).then(res => {
          this.$toast.success('保存成功')
          this.$router.back()
        }).catch(e => { })
      } else {
        addAddress(obj).then(res => {
          this.$toast.success('保存成功')
          this.$router.back()
        }).catch(e => { })
      }



    },
    onDelete(value) {
      console.log('删除地址', value)
      deleteAddress(value.id).then(res => {
        this.$toast.success('删除成功')
        this.$router.go(-1)
      }).catch(e => { })
    }
  }
}
</script>

<style>
.van-button--danger {
  background-color: blue !important;
}

.van-sidebar-item--select,
.van-sidebar-item--select:active {
  background-color: #FFCCCC;
  color: white;
}

.address .van-button--danger {
  background-color: #389138 !important;
  border: 0px;
}
</style>
